<template>
  <div>
    <!-- <img src="@/assets/screen/title_06.svg" alt="" style="width: 100%; height: 100%" /> -->
    <!-- height="100%" height: 400px   arrow="always"-->
    <div class="titletext">本月连续三天未上传视频班组</div>
    <el-carousel
      height="80px"
      :autoplay="true"
      indicator-position="none"
      ref="carouselRef"
      interval="5000"
      @change="carouselChange"
    >
      <el-carousel-item v-for="(item, index) in videos" :key="index">
        <div class="currentMonth">
          <div v-for="(nitem, nindex) in item" :key="nindex">
            <div class="threecell">
              <div class="title"
                ><span>{{ nitem.nindex }}</span> {{ nitem.depName || '' }}</div
              >
              <div class="space"></div>
              <div class="count"
                >连续<span>{{ nitem.count }}</span
                >天</div
              >
              <!-- :style="'color:' + poins[nindex]" -->
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { ElCarousel, ElCarouselItem } from 'element-plus'
import { getCurrentThreeDayReportApi } from '@/api/screen'
import { onMounted, onUnmounted, ref, reactive, unref, nextTick } from 'vue'
const carouselRef = ref()
const videosRef = ref([])
const heigth = ref(0)
window.addEventListener('resize', () => {
  console.log('resize', window.innerHeight, window.innerWidth, document.body.clientHeight)
  heigth.value = window.innerHeight * 0.45 + 'px'
})
// console.log('height', window.innerHeight, window.innerWidth, document.body.clientHeight)

const getVideoRef = (el, index) => {}
const carouselChange = (e) => {
  // console.log('carouselChange-----', e)
}
const chunkArray = (array, size) => {
  const result = []
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size))
  }
  return result
}
const poins = ref([
  '#FFFF00',
  '#FF7800',
  '#1B51FF',
  '#FF0060',
  '#FF9F10',
  '#C600FF',
  '#7800FF',
  '#0080F8',
  '#00709E',
  '#ABD46E'
])
const videos = ref([1, 2, 3])
const getUpCurrentMonthReport = async () => {
  const res = await getCurrentThreeDayReportApi()
  console.log('getUpCurrentMonthReport', res.data)
  const arr = res.data || []
  //   chunkArray(arr, 10)
  //   console.log('chunkArray', chunkArray(arr, 10))
  //   const newArr = [arr.slice(0, middleIndex), arr.slice(middleIndex)]
  arr.map((item, index) => {
    item.nindex = index + 1
  })
  videos.value = chunkArray(arr, 4)
}
getUpCurrentMonthReport()
</script>
<style scoped lang="less">
.titletext {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  // margin-bottom: 10px;
  padding: 10px 20px;
  // background: #0078ff;
  background: linear-gradient(
    to right,
    rgba(3, 96, 253, 0.4) 30%,
    rgba(72, 97, 236, 0.2) 50%,
    rgba(0, 14, 98, 0.7) 100%
  );
  background-repeat: no-repeat;
}
.currentMonth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 14px;
  grid-row-gap: 8px;

  border-radius: 8px;
  //   overflow: hidden;
  // grid-gap: 8px;
  .threecell {
    color: #fff;
    padding: 0 24px;

    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      // width: 100px;
      flex: 1;
      span {
        border: 1px solid #fff;
        border-radius: 50%;
        padding: 0 4px;
        font-size: 12px;
        margin-right: 4px;
      }
    }
  }

  .point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .count {
    margin-left: 10px;
    font-size: 14px;
    span {
      color: #0078ff;
      font-size: 18px;
      font-weight: 600;
      margin: 0 4px;
    }
  }
  .space {
    width: 80px;
    height: 0;
    content: '';
    border-bottom: 1px dashed white;
  }
}
</style>
